<template>
  <div v-show="show">
    <mini-audio html5 v-if="showAudio" :audio-source="src"></mini-audio>
    <div class="listen">
      <!-- <div class="sectionA">
        <div class="section_items_header">Section A</div>
        <div class="section_items">
          <span class="item_dir">Directions: </span>
          <span class="item_indro"
            >this section, you will hear three neyvs reports. At the end of each
            news report, you will hear two or three questions. Both the news
            report and the questions will be spoken only once. After you hear a
            question, you must choose the best answer from the four choices
            marked A), B), C) and D). Then mark the corresponding letter on
            Answer Sheet 1 with a single line through the centre.</span
          >
        </div>
        <div class="section_items_questions">
          Questions 1 and 2 are based on the news report you have just heard.
        </div>
      </div> -->
      <div class="section_items_header">Section A</div>
      <div class="section_items">
        <span class="item_dir">Directions: </span>
        <span class="item_indro"
          >In this section, you will hear three news reports. At the end of each
          news report, you will hear two or three questions. Both the news
          report and the questions will be spoken only once. After you hear a
          question, you must choose the best answer from the four choices marked
          A), B), C) and D). Then mark the corresponding letter on Answer Sheet
          1 with a single line through the centre.</span
        >
      </div>
      <van-form
        ><div
          class="section_items"
          v-for="(item, index) in questions"
          :key="item.id"
        >
          <div v-if="index == 0" class="section_items_questions">
            Questions 1 and 2 are based on the news report you have just heard.
          </div>
          <div v-if="index == 2" class="section_items_questions">
            Questions 3 and 4 are based on the news report you have just heard.
          </div>
          <div v-if="index == 4" class="section_items_questions">
            Questions 5 to 7 are based on the news report you have just heard.
          </div>
          <div v-if="index == 7" class="section_items_questions">
            <div class="section_items">
              <div class="section_items_header">Section B</div>
              <span class="item_dir">Directions: </span>
              <span class="item_indro"
                >In this section, you will hear two long conversations. At the
                end of each conversation,you will hear four questions. Both the
                conversation and the questions will be spoken only once. After
                you hear a question, you must choose the best answer from the
                four choices marked A), B), C) and D). Then mark the
                corresponding letter on Answer Sheet with a single line through
                the centre.</span
              >
            </div>
            Questions 8 to 11 are based on the conversation you have just heard.
          </div>
          <div v-if="index == 11" class="section_items_questions">
            Questions 12 to 15 are based on the conversation you have just
            heard.
          </div>
          <div v-if="index == 15" class="section_items_questions">
            <div class="section_items">
              <div class="section_items_header">Section C</div>
              <span class="item_dir">Directions: </span>
              <span class="item_indro"
                >In this section, you will hear three passages. At the end of
                each passage, you hear three or four questions. Both the passage
                and the questions will be spoken only once.After you hear a
                question, you must choose the best answer from the four choices
                marked A), B), C) and D). Then mark the corresponding letter on
                Answer Sheet 1 with a single line through the centre.</span
              >
            </div>
            Questions 16 to 18 are based on the conversation you have just
            heard.
          </div>
          <div v-if="index == 18" class="section_items_questions">
            Questions 19 to 21 are based on the passage you have just heard.
          </div>
          <div v-if="index == 21" class="section_items_questions">
            Questions 22 to 25 are based on the passage you have just heard.
          </div>
          <div class="item_group">
            <div class="item_index">{{ index + 1 }}.</div>
            <van-radio-group class="radio_group" v-model="seleted[index]">
              <div class="section_items_selection">
                <van-radio :disabled="disabledRadio" name="A">{{
                  item.question1
                }}</van-radio>
              </div>
              <div class="section_items_selection">
                <van-radio :disabled="disabledRadio" name="B">{{
                  item.question2
                }}</van-radio>
              </div>
              <div class="section_items_selection">
                <van-radio :disabled="disabledRadio" name="C">{{
                  item.question3
                }}</van-radio>
              </div>
              <div class="section_items_selection">
                <van-radio :disabled="disabledRadio" name="D">{{
                  item.question4
                }}</van-radio>
              </div>
            </van-radio-group>
          </div>
        </div>
      </van-form>
      <el-button
        style="margin-top: 10px; margin-bottom: 10px"
        type="success"
        @click="submit"
        >提交</el-button
      >
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具 js，第三方插件 js，json 文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import audioApi from "@/api/audio/index";
import listenRecord from "@/api/listenRecord/index";
import { Dialog } from "vant";
import { Notify } from "vant";
import host from "@/utils/host";

export default {
  //import 引入的组件需要注入到对象中才能使用
  components: {},
  props: {},
  data() {
    //这里存放数据
    return {
      show: false,
      disabledRadio: false,
      audio: {},
      src: "", //音频资源的连接
      showAudio: false,
      item1: ["", ""],
      questions: [],
      seleted: [],
    };
  },
  //计算属性 类似于 data 概念
  computed: {},
  //监控 data 中的数据变化
  watch: {},
  //方法集合
  methods: {
    getAudio: async function () {
      const res = await audioApi.getById(this.$route.query.id);
      this.audio = res.data;
      //   this.src = res.data.path;
      const port = process.env.NODE_ENV == "development" ? 9080 : 80;
      // this.src = "http://" + host + ":/elearning/audio/stream?fileName=" + encodeURIComponent(res.data.path);
      this.src = `http://${host}:${port}/elearning/audio/stream?fileName=${encodeURIComponent(res.data.path)}`;
      this.showAudio = true;
      this.questions = JSON.parse(this.audio.questions);
      this.show = true;
    },
    submit: async function () {
      this.disabledRadio = true;
      let seleted = 0;
      this.seleted.forEach((s) => (s ? seleted++ : seleted));
      if (seleted < 25) {
        Dialog.confirm({
          message: "还有未选择的题目，是否继续提交？",
          confirmButtonText: "直接交卷",
          cancelButtonText: "检查一下",
          confirmButtonColor: "red",
          cancelButtonColor: "green",
        })
          .then(() => {
            // on confirm
            this.showResult(this.compareArray());
          })
          .catch(() => {
            Notify({ type: "primary", message: "已取消提交" });
          });
      } else {
        this.showResult(this.compareArray());
      }
    },
    //显示考试得分并允许查看听力原文
    showResult: async function (result) {
      Notify({ type: "primary", message: `您的得分是：${result}` });
      //记录成绩
      listenRecord.updateScore(result, this.audio.id);
      //这里提示用户是否查看原文，如果查看则从服务器下载原文
      setTimeout(() => {
        this.$router.push({
          path: "/learn/listening/listenText",
          query: { name: this.audio.name, path: this.audio.path },
        });
      }, 1500);
    },
    /**
     * 比较audio的answers和this.seleted有多少在相同索引位置的地方内容也一样
     */
    compareArray() {
      let arr = JSON.parse(this.audio.answers);
      let rightNum = 0;
      for (let index = 0; index < arr.length; index++) {
        const element = arr[index];
        if (element === this.seleted[index]) {
          rightNum++;
        }
      }
      return rightNum * 4;
    },
  },
  //生命周期 - 创建完成（可以访问当前 this 实例）
  created() {
    this.getAudio();
  },
  //生命周期 - 挂载完成（可以访问 DOM 元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有 keep-alive 缓存功能，这个函数会触发
};
</script>
<style scoped>
div {
  margin-top: 20px;
}
.listen {
  margin-left: 5px;
  font-family: Calibri;
}
.item_group {
  display: flex;
  flex-direction: row;
}
.item_index {
  margin-top: 12px;
}
.radio_group {
  margin-top: 2px;
  margin-left: 5px;
}
.section_items_questions {
  margin-top: -10px;
  margin-bottom: -20px;
  font-weight: bold;
}
.section_items_selection {
  margin-top: -10px;
}
.section_items_header {
  font-weight: bold;
}
.item_dir {
  font-weight: bold;
}
.item_indro {
  font-style: italic;
  font-weight: bold;
}
</style>
